<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>洗车接送</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon2.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;}
        .products-list ul li{color: #999999;padding: 0 15px;font-size: 14px;}
        .products-list ul li label{color: #000000; margin-right: 15px;}
        .products-list ul li input{border: none; height: 35px;width: 60%;}
        .products-list ul li span{color: #2dc22d}
        .out{display: none;}

        .am-modal{width: 300px;left: 45%}
        .am-btn-default{border-color: #dfdfdf;}
        .am-modal-dialog{border-radius: 5px;}
        .am-modal-hd{font-weight: bold;padding: 5px 10px 5px 10px;}
        .am-modal-bd{border-bottom: none}
        .am-modal-footer{display: block;}
        .am-modal-btn{display: inline-block !important}
        .am-btn2{width: 90px;height: 30px;line-height: 30px;border-radius: 5px !important; font-size: 1.4rem;color: #a6a6a6;background-color: #fff;border: 1px solid #dcdcdc !important;}
        .red{background-color: #fb5e53;color: #FFFFFF; }

        .pp{border-bottom: 1px solid #e1e1e1;padding: 8px 0;text-align: left;margin: 0 10px;}
    </style>
</head>
<body>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">订单信息核对</div>
        <div class="am-modal-bd">
            <p class="am-text-sm pp">预约普通洗车服务</p>
            <p class="am-text-sm pp">价格：38元</p>
            <p class="am-text-sm pp">预约时间：2015-06-06&nbsp;&nbsp;14:00-15:00</p>
            <p class="am-text-sm pp">接车地点：北京五道口汽车维修服务中心</p>
            <p class="am-text-sm pp">联系电话：15600153257</p>
            <p class="am-text-sm pp">接车费用：20元 </p>
            <p class="am-text-sm pp">费用合计：58元</p>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn btn am-btn2 am-btn-default" style="margin-right: 15px;" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn btn am-btn2 am-btn-default red" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="products-list">
    <ul>
        <li><input type="text" placeholder="请输入您的姓名" /><span class="am-fr">必填</span></li>
        <li><input type="text" placeholder="请输入联系方式 " /><span class="am-fr">必填</span></li>
        <li><label>选择车型</label><input type="text" placeholder="5座以下" /><span class="am-fr">必填</span></li>
        <li><p><span style="margin-right: 10px;color: #000;">我在</span>广东省深圳市南山区南海大道南段</p></li>
        <li><input type="text" placeholder="地址信息" /></li>
        <li><p class="change">普通2小时~3小时接送车服务
            <span class="am-fr">
                <i class="ui-fonts icon-chevron-right am-fr down ">&#xe600;</i>
                <i class="ui-fonts icon-chevron-right am-fr right out">&#xe601;</i>
            </span></p>
        </li>
        <li class="add"><p>加急1.5小时内接送车服务 <s style="color:#ef4437">+20元</s></p></li>
    </ul>
</div>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom" style="height: 70px;text-align: center;">
    <button type="submit" id="doc-modal-list" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy" style="margin-bottom: 10px;">提交</button>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#doc-modal-list').on('click', function() {
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    alert("确定了");
                },
                // closeOnConfirm: false,
                onCancel: function() {
                    alert('算求，不弄了');
                }
            });
        });

        $('p.change').on('click', function() {
            if ($('.down').hasClass('out')) {
                $('.down').removeClass('out');
                $('.right').addClass('out');
            } else {
                $('.right').removeClass('out');
                $('.down').addClass('out');
            }

            $('.add').slideToggle('slow');
        });
    });
</script>
</body>
</html>